<template>
    <div class="user-info">
        <!-- 头部 -->
        <div class="info-header">
            <h3>基本资料</h3>
        </div>
        <!-- 内容 -->
        <div class="info-container">
            <el-form :model="userInfo" :rules="rules" ref="userForm">
                <el-row>
                    <el-col :span="12">
                            <el-form-item label-width="100px">
                                <template slot="label">
                                    <span>登录名称</span>
                                </template>
                                <el-input class="infoIpt" v-model="userInfo.username" :disabled="true"></el-input>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                            <el-form-item label-width="100px" prop="nickname">
                                <template slot="label">
                                    <span>用户昵称</span>
                                </template>
                                <el-input class="infoIpt" placeholder="请输入用户昵称"  v-model="userInfo.nickname"></el-input>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                            <el-form-item label-width="100px" prop="email">
                                <template slot="label">
                                    <span>用户邮箱</span>
                                </template>
                                <el-input class="infoIpt" placeholder="请输入用户邮箱" v-model="userInfo.email"></el-input>
                            </el-form-item>
                    </el-col>
                </el-row>
                <!-- 按钮 -->
                <el-row type="flex">
                    <el-col :span="12"  style="margin-left: 100px;">
                            <el-form-item >
                                <el-button type="primary" @click="editUserInfo">提交修改</el-button>
                                <el-button @click="resetForm">重置</el-button>
                            </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getUserInfo, editUserInfo } from '@/api/user'
export default {
  data () {
    return {
      userInfo: {
        id: null,
        username: '',
        nickname: '',
        email: '',
        user_pic: null
      },
      rules: {
        nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '用户昵称要在1~10个字符', trigger: 'blur' }],
        email: [{ required: true, message: '用户邮箱不能为空', trigger: 'blur' },
          { pattern: /^([A-Za-z0-9])+@([A-Za-z0-9])+.([A-Za-z]{2,4})$/, message: '不符合用户邮箱格式', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getUserInfo()
  },
  // methods
  methods: {
    //  获取个人信息
    async getUserInfo () {
      const res = await getUserInfo()
      this.userInfo = { ...res.data }
      // 存Vuex
      this.$store.dispatch('user/changeUserInfo', res.data)
      console.log(this.$store.state.user.userInfo)
    },

    //  更新个人信息——基本资料
    editUserInfo () {
      this.$refs.userForm.validate(async (isOk) => {
        if (isOk) {
          await editUserInfo(this.userInfo)
          this.$message.success('更新基本资料成功')
        }
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.userForm.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
    .user-info{
        padding: 30px;
        width: 100%;
        height: 100%;
        .info-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 30px;

            height: 70px;
            background: #FFFFFF;
            border-radius: 4px 4px 0px 0px;
        }
        .info-container{
            padding: 0px 30px;
            background-color: #FFFFFF;
            span{
                font-size: 16px;
            }
            .infoIpt{
                width: 400px;
            }
        }
    }
</style>
